<template>
  <div>
    <div>
      姓：<input v-model="firstName" type="text">
    </div>
    <div>
      名：<input v-model="lastName" type="text">
    </div>
    <div>
      全名：{{ name }}
    </div>
  </div>

  <hr>

  <div>
    <button @click="changeName">修改</button>
  </div>
</template>

<script setup lang="ts">
  import {ref, computed} from 'vue'
  let firstName = ref("张");
  let lastName = ref("三");

  // 1.选项式写法，支持一个对象传入get函数以及set函数自定义操作
  let name = computed<string>({
    get() {
      return firstName.value + "-" + lastName.value
    },
    set(newVal) {
      console.log(newVal)
      return [firstName.value, lastName.value] = newVal.split("-")
    }
  })

  const changeName = () => {
    name.value = "李-四"
  }
  
  // 2.函数式写法，只能支持一个getter函数不允许修改值的
  /* let name = computed(() => firstName.value + "-" + lastName.value)

  const changeName = () => {
    name.value = "李-四"     // 报错 此时是只读的name 不能修改值
  } */
</script>

<style scoped>

</style>